/**
 * Modal中Balloon定位问题 排查示例
 * 疑似Moadl中、body高度为0、需要自动计算（未指定align或align指定位置不够）这几个条件叠加会产生此bug
 */

import React from 'react';
import { Tab, Button, Modal, Overlay, Balloon, Nav } from '@teamix/ui';
import { Layout, SideBar, Header, Body, BodyContent, Content } from '@alife/devops-ui';

const { Popup } = Overlay;

export default function DumiDemo() {
  const [visible, onVisibleChange] = React.useState(false);
  const onClose = () => {
    onVisibleChange(false);
  };
  const onOpen = () => {
    document.querySelector('#container').remove();
    onVisibleChange(true);
  };
  return (
    <div>
      <Button onClick={onOpen}>打开Modal</Button>
      <Modal
        title="标题"
        description="描述区域"
        visible={visible}
        onClose={onClose}
        operations={
          <>
            <Button type="secondary">编辑</Button>
            <Button type="secondary">保存</Button>
          </>
        }
      >
        <>
          <div style={{ margin: 200 }}>
            <Balloon.Tooltip
              trigger={
                <Button type="primary" text style={{ marginLeft: 8 }}>
                  导出
                </Button>
              }
              align="tl"
              triggerType="click"
            >
              一次最多导出 10000 条，若超过，可通过筛选分次导出
            </Balloon.Tooltip>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Balloon.Tooltip
                align="tl"
                trigger={<Button type="primary">添加模板</Button>}
                // popupContainer={(trigger) => trigger.parentNode}
              >
                手动备份暂不可用，请先设置备份空间
              </Balloon.Tooltip>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>哈哈哈</div>
            <Balloon.Tooltip
              // align="tr"
              align="tl"
              trigger={<Button type="primary">添加模板</Button>}
              // popupContainer={(trigger) => trigger.parentNode}
            >
              手动备份暂不可用，请先设置备份空间
            </Balloon.Tooltip>
          </div>
          <Layout noPadding>
            <Body>
              {/* <SideBar size="small"> */}
              <SideBar>
                <Nav embeddable defaultOpenAll defaultSelectedKeys="envTemp">
                  <Nav.Group label={'环境部署管理'}>
                    <Nav.Item key="envTemp">环境模板</Nav.Item>
                    <Nav.Item key="deployTemp">部署模板</Nav.Item>
                  </Nav.Group>
                  <Nav.Group label={'其他设置'}>
                    <Nav.Item key="tag">标签管理</Nav.Item>
                    <Nav.Item key="authorization">授权与凭证</Nav.Item>
                  </Nav.Group>
                </Nav>
              </SideBar>
              <BodyContent>
                <Header
                  title="环境模板"
                  operation={
                    <>
                      <Balloon.Tooltip
                        align="tl"
                        trigger={<Button type="primary">添加模板</Button>}
                        // popupContainer={(trigger) => trigger.parentNode}
                      >
                        手动备份暂不可用，请先设置备份空间
                      </Balloon.Tooltip>
                    </>
                  }
                />
                <Content>
                  <div className="custom-content">
                    <Popup trigger={<Button>Open</Button>} v2 triggerType="click">
                      <div className="overlay-demo">Hello World From Popup!</div>
                    </Popup>
                  </div>
                  <Tab
                    className="sls-root-tab"
                    navClassName="sls-root-nav"
                    //   onChange={this.onMainTabChange}
                    size="small"
                    animation={false}
                  >
                    <Tab.Item title={'日志概览'} key="overview">
                      <Tab
                        // className="audit-log-tab"
                        //   onChange={this.onTabChange}
                        shape="capsule"
                        animation={false}
                        extra={
                          <div style={{ position: 'relative' }}>
                            <Balloon.Tooltip
                              trigger={
                                <Button type="primary" text style={{ marginLeft: 8 }}>
                                  导出
                                </Button>
                              }
                              align="tl"
                              triggerType="click"
                            >
                              一次最多导出 10000 条，若超过，可通过筛选分次导出
                            </Balloon.Tooltip>
                          </div>
                        }
                      >
                        <Tab.Item title={'bobo'} key={'bobo'}>
                          123
                        </Tab.Item>
                      </Tab>
                    </Tab.Item>
                  </Tab>
                  <div className="custom-content">
                    <Balloon.Tooltip
                      align="tl"
                      trigger={<Button type="primary">打开tooltip</Button>}
                      // popupContainer={(trigger) => trigger.parentNode}
                    >
                      手动备份暂不可用，请先设置备份空间
                    </Balloon.Tooltip>
                  </div>
                </Content>
              </BodyContent>
            </Body>
          </Layout>
        </>
      </Modal>
    </div>
  );
}
